{% extends "base.html" %}
{% load static %}

{% block content %}
<head>
    <title>雅歌音频</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1200, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="{% static 'images/apple-touch-icon.png'%}" rel="apple-touch-icon"/>
    <link href="{% static 'css/jquery-ui-themes.css' %}" type="text/css" rel="stylesheet"/>
    <link href="{% static 'css/axure_rp_page.css' %}" type="text/css" rel="stylesheet"/>
    <link href="{% static 'css/styles.css' %}" type="text/css" rel="stylesheet"/>
    <link href="{% static 'css/雅歌音频/detail.css' %}" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="{% static 'scripts/jquery-1.7.1.min.js' %}"></script>
    <script src="{% static 'scripts/jquery-ui-1.8.10.custom.min.js' %}"></script>
    <script src="{% static 'scripts/prototypePre.js' %}"></script>
    <script src="{% static 'scripts/document.js' %}"></script>
    <script src="{% static 'scripts/prototypePost.js' %}"></script>
    <script src="{% static 'scripts/雅歌音频/detail.js' %}"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
</head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (矩形) -->
      <div id="u264" class="ax_default _默认样式">
        <div id="u264_div" class=""></div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u265" class="ax_default _默认样式">
        <div id="u265_div" class=""></div>
      </div>

      <!-- Unnamed (顶部导航) -->

      <!-- 顶部导航 (动态面板) -->

      <!-- Unnamed (群组 ) -->

      <!-- Unnamed (侧边工具) -->

      <!-- 侧边工具 (动态面板) -->
      <div id="u284" class="ax_default" data-label="侧边工具">
        <div id="u284_state0" class="panel_state" data-label="State1" style="">
          <div id="u284_state0_content" class="panel_state_content">

            <!-- Unnamed (矩形) -->
            <div id="u285" class="ax_default _默认样式">
              <div id="u285_div" class=""></div>
              <div id="u285_text" class="text ">
                <p style="font-size:28px;"><span style="font-family:'FontAwesome';font-weight:400;color:#CCCCCC;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;color:#999999;">在线咨询</span></p>
              </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u286" class="ax_default _默认样式">
              <div id="u286_div" class=""></div>
              <div id="u286_text" class="text ">
                <p style="font-size:28px;"><span style="font-family:'FontAwesome';font-weight:400;color:#CCCCCC;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;color:#999999;">关注我们</span></p>
              </div>
            </div>

            <!-- TOP (矩形) -->
            <div id="u287" class="ax_default _默认样式 ax_default_hidden" data-label="TOP" style="display:none; visibility: hidden">
              <div id="u287_div" class=""></div>
              <div id="u287_text" class="text ">
                <p style="font-size:28px;"><span style="font-family:'FontAwesome';font-weight:400;color:#CCCCCC;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;color:#999999;">返回顶部</span></p>
              </div>
            </div>

            <!-- 二维码 (动态面板) -->
            <div id="u288" class="ax_default ax_default_hidden" data-label="二维码" style="display:none; visibility: hidden">
              <div id="u288_state0" class="panel_state" data-label="State1" style="">
                <div id="u288_state0_content" class="panel_state_content">

                  <!-- Unnamed (气泡) -->
                  <div id="u289" class="ax_default _默认样式">
                    <img id="u289_img" class="img " src="{% static 'images/u35.png' %}"/>
                  </div>

                  <!-- Unnamed (群组 ) -->
                  <div id="u290" class="ax_default" data-left="5" data-top="14" data-width="200" data-height="212">

                    <!-- Unnamed (矩形) -->
                    <div id="u291" class="ax_default _默认样式">
                      <img id="u291_img" class="img " src="{% static 'images/u37.png' %}"/>
                      <div id="u291_text" class="text ">
                        <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">关注微信公众号</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">获取最新分享内容</span></p>
                      </div>
                    </div>

                    <!-- Unnamed (矩形) -->
                    <div id="u292" class="ax_default _默认样式">
                      <img id="u292_img" class="img " src="{% static 'images/u38.png' %}"/>
                      <div id="u292_text" class="text ">
                        <p><span>微信扫一扫关注</span></p><p><span>或搜索关注：华中师范大学出版社</span></p>
                      </div>
                    </div>

                    <!-- Unnamed (图片 ) -->
                    <div id="u293" class="ax_default image">
                      <img id="u293_img" class="img " src="{% static 'images/u39.jpg' %}"/>
                    </div>

                    <!-- Unnamed (矩形) -->
                    <div id="u294" class="ax_default _默认样式">
                      <div id="u294_div" class=""></div>
                      <div id="u294_text" class="text ">
                        <p><span></span></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 顶部热区 (热区) -->
      <div id="u295" class="ax_default" data-label="顶部热区">
      </div>

      <!-- Unnamed (精简底部) -->

      <!-- 背景 (动态面板) -->
      <div id="u297" class="ax_default" data-label="背景">
        <div id="u297_state0" class="panel_state" data-label="State1" style="">
          <div id="u297_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u298" class="ax_default _默认样式">
        <div id="u298_div" class=""></div>
        <div id="u298_text" class="text ">
          <p style="font-size:14px;"><span style="font-size:13px;">Copyright ©</span><a id="u299" class="link"><span style="font-size:13px;"> http://press.ccnu.edu.cn</span></a><span style="font-size:13px;">, All Rights Reserved.&nbsp; </span><span>举师范旗帜&nbsp;&nbsp; 铸教育品牌</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u300" class="ax_default _默认样式">
        <div id="u300_div" class=""></div>
        <div id="u300_text" class="text ">
          <p><a id="u301" class="link"><span style="color:#999999;">首页</span></a><span> &gt; </span><a id="u302" class="link"><span style="color:#999999;">雅歌音频</span></a><span> &gt; 详情</span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u303" class="ax_default _默认样式">
        <div id="u303_div" class=""></div>
        <div id="u303_text" class="text ">
          <p style="font-size:20px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">{{ audio.Title }}</span></p><p style="font-size:16px;"><span style="font-family:'微软雅黑';font-weight:400;">原创： {{ audio.Creator }}&nbsp; {{ audio.Date | date:'Y-m-d'}}&nbsp; </span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u304" class="ax_default _默认样式">
        <div id="u304_div" class=""></div>
        <div id="u304_text" class="text ">
          <p style="text-align:left;"><span><br></span></p><p style="text-align:left;"><span><br></span></p><p style="text-align:left;"><span><br></span></p><p style="text-align:left;"><span><br></span></p><p style="text-align:center;"><span>词&nbsp;&nbsp; {{ audio.Lyricist}}&nbsp;&nbsp; </span></p><p style="text-align:center;"><span>曲&nbsp;&nbsp; {{ audio.Compose }}</span></p><p style="text-align:center;"><span><br></span></p>
            <p style="text-align:center;">
                <span>你知道你是谁？</span></p><p style="text-align:center;"><span>你知道华年如水？</span></p><p style="text-align:center;"><span>你知道秋声，添得几分憔悴？</span></p><p style="text-align:center;"><span>垂、垂、垂、垂</span></p><p style="text-align:center;"><span>你知道今日的江山有多少凄惶的泪？</span></p><p style="text-align:center;"><span>你想想吧、对、对、对</span></p><p style="text-align:center;"><span><br></span></p><p style="text-align:center;"><span>你知道你是谁？</span></p><p style="text-align:center;"><span>你知道人生如蕊？</span></p><p style="text-align:center;"><span>你知道秋花为何开得这样沉醉？</span></p><p style="text-align:center;"><span>吹、吹、吹、吹</span></p><p style="text-align:center;"><span>你知道尘世的波澜有几种温良的类？</span></p><p style="text-align:center;"><span>你讲讲吧？</span></p><p style="text-align:center;"><span>脆、脆、脆？</span></p><p style="text-align:left;"><span><br></span>
          </p>
          <p style="text-align:left;">
            <span>{{ audio.SingerIntro|safe }}</span>
          <!--<span>&nbsp;&nbsp; &nbsp; &nbsp; 2017年8月，奥地利政府邀请范竞马和琥珀四重奏前往维也纳举行“国风雅歌”专场音乐会。</span></p><p style="text-align:left;"><span>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; 这是范竞马第一次和琥珀四重奏合作，出国之前，范竞马打算在北京彩排一次，这个消息不胫而走，国风雅歌的乐友们听说之后纷纷要求去彩排现场一睹为快。没想到来的人太多，加了上百把椅子，连夜赶制节目单，架设机器，原本非正式的彩排变成了正式的演出。</span></p><p style="text-align:left;"><span><br></span></p><p style="text-align:left;"><span><br></span>-->
          </p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u305" class="ax_default _默认样式">
        <div id="u305_div" class=""></div>
        <div id="u305_text" class="text ">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u306" class="ax_default _默认样式">
        <div id="u306_div" class=""></div>
        <div id="u306_text" class="text ">
          <p><span>www.taobao.com</span></p>
        </div>
      </div>

      <!-- Unnamed (SVG) -->
      <div id="u307" class="ax_default image">
        <img id="u307_img" class="img " src="{% static 'images/u70.svg' %}"/>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u308" class="ax_default _默认样式">
        <div id="u308_div" class=""></div>
        <div id="u308_text" class="text ">
          <p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">歌曲名称：{{ audio.SongName }}</span></p><p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">演唱：{{ audio.Singer }}</span></p><p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">歌曲类型：</span><span style="font-family:'微软雅黑';font-weight:400;">{{ audio.Type }}</span></p><p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">演唱时间：</span><span style="font-family:'微软雅黑';font-weight:400;">{{ audio.SingDate }} </span></p>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u309" class="ax_default _默认样式">
        <div id="u309_div" class=""></div>
        <div id="u309_text" class="text ">
          <p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">词曲：</span><span style="font-family:'微软雅黑';font-weight:400;">{{ audio.Lyricist }} {{ Compose }}</span></p><p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">版权所属：</span><span style="font-family:'微软雅黑';font-weight:400;">{{ audio.CopyRight }}</span><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;"> </span></p><p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">演唱地点：</span><span style="font-family:'微软雅黑';font-weight:400;">{{ audio.Location }}</span></p><p><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">伴奏：</span><span style="font-family:'微软雅黑';font-weight:400;">{{ audio.Accompany }}</span></p>
        </div>
      </div>

      <!-- Unnamed (Right Arrow Button) -->
      <div id="u310" class="ax_default _默认样式">
        <img id="u310_img" class="img" src="{% static 'images/u310.png' %}"/>
        <div id="u310_text" class="text ">
          <p><span>{{ audio.Title }}</span></p>
        </div>
      </div>

      <!-- Unnamed (群组 ) -->
      <div id="u311" class="ax_default" data-left="80" data-top="1380" data-width="1200" data-height="565">

        <!-- Unnamed (矩形) -->
        <div id="u312" class="ax_default _默认样式">
          <div id="u312_div" class=""></div>
          <div id="u312_text" class="text ">
            <!--<p><span>&nbsp;&nbsp; &nbsp; &nbsp;&nbsp; 听过国风雅歌音乐会的朋友会发现，每次音乐会的开场总少不了那么几首经典曲目。</span></p><p><span>&nbsp;&nbsp; &nbsp;&nbsp; 《问》堪称是经典中的经典，它被公认为中国艺术歌曲的开端。</span></p><p><span>&nbsp;&nbsp; &nbsp; &nbsp; 这首歌发表于1922年，易韦斋作词，萧友梅谱曲。上世纪二十年代，中国的政治、经济、文化等方面都在发生巨变，经过“五四”运动的洗礼，中国的音乐文化事业也开始进入一个新的历史时期。一些海归音乐家开始致力于艺术歌曲的创作，他们尝试采用欧洲的作曲技法，创作出艺术形式和精神内涵上，都趋于完美的艺术歌曲。由萧友梅作曲并编配钢琴伴奏的《问》，就是中国早期艺术歌曲的代表作之一。</span></p><p><span>&nbsp;&nbsp; &nbsp; &nbsp; 今年11月7日，范竞马在上海音乐学院开办了一场国风雅歌讲座。</span></p><p><span>&nbsp;&nbsp; &nbsp; &nbsp; 这所学院的前身叫国立音乐学院——中国第一所正规的专业高等音乐学府。而它的创始人之一，就是萧友梅。萧友梅是中国现代音乐史上开基创业的一代宗师，是现代专业音乐教育的开拓者与奠基者。在他一生创作的一百多首各种体裁的歌曲中，《问》是最有影响力的一首。</span></p><p><span>&nbsp;&nbsp; &nbsp; &nbsp; 这样一首形式优美，内涵丰富的歌曲放在今天该用怎样的方式去传唱呢？</span></p><p><span>&nbsp;&nbsp; &nbsp; &nbsp; 范竞马有他自己的标准。他总是强调音乐要回归本真，怎么说话就怎么唱歌。在音乐的开头，范竞马清唱了《问》的第一段，平稳深沉、抑扬顿挫的嗓音纯净得恰到好处，即使没有伴奏的润色也丝毫不单调。认识范竞马的人会知道，他平时说话也是这个嗓音。曾经流行于二十年代的这首歌，随着时间的流逝，逐渐被人淡忘了。范竞马不厌其烦地强调：经典必须不断被重复。他渴望通过自己的演唱唤醒人们对经典艺术歌曲的认知，他希望这些传承下来的民族瑰宝能重获青睐。</span></p>-->
          {{ audio.SongIntro|safe }}
          </div>
        </div>

        <!-- Unnamed (Right Arrow Button) -->
        <div id="u313" class="ax_default _默认样式">
          <img id="u313_img" src="{% static 'images/u310.png' %}"/>
          <div id="u313_text" class="text ">
            <p><span>{{ audio.Tag }}</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (矩形) -->
      <div id="u314" class="ax_default box_2">
        <div id="u314_div" class=""></div>
      </div>

      <!-- Unnamed (动态面板) -->
      <div id="u315" class="ax_default">
        <div id="u315_state0" class="panel_state" data-label="State1" style="">
          <div id="u315_state0_content" class="panel_state_content">

            <!-- Unnamed (群组 ) -->
            <div id="u316" class="ax_default" data-left="0" data-top="0" data-width="561" data-height="110">

              <!-- Unnamed (矩形) -->
              <div id="u317" class="ax_default _默认样式">
                <div id="u317_div" class=""></div>
              </div>

              <!-- Unnamed (群组 ) -->
              <div id="u318" class="ax_default" data-left="110" data-top="62" data-width="353" data-height="7">

                <!-- Unnamed (群组 ) -->
                <div id="u319" class="ax_default" data-left="110" data-top="62" data-width="353" data-height="7">

                  <!-- Unnamed (矩形) -->
                  <div id="u320" class="ax_default _默认样式">
                    <div id="u320_div" class=""></div>
                  </div>

                  <!-- Unnamed (矩形) -->
                  <div id="u321" class="ax_default _默认样式">
                    <div id="u321_div" class=""></div>
                  </div>
                </div>
              </div>

              <!-- Unnamed (矩形) -->
              <div id="u322" class="ax_default _默认样式">
                <div id="u322_div" class=""></div>
                <div id="u322_text" class="text ">
                  <p><span>《{{ audio.SongName }}》 演唱：{{ audio.Singer }}</span></p>
                </div>
              </div>

              <!-- Unnamed (图片 ) -->
              <div id="u323" class="ax_default image">
                <img id="u323_img" class="img " src="{% static 'images/u323.jpg' %}"/>
              </div>

              <!-- Unnamed (矩形) -->
              <div id="u324" class="ax_default _默认样式">
                <div id="u324_div" class=""></div>
                <div id="u324_text" class="text ">
                  <p><span>05:15 </span></p>
                </div>
              </div>

              <!-- Unnamed (矩形) -->
              <div id="u325" class="ax_default _默认样式">
                <div id="u325_div" class=""></div>
              </div>

              <!-- Unnamed (矩形) -->
              <div id="u326" class="ax_default _默认样式">
                <div id="u326_div" class=""></div>
                <div id="u326_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

{% endblock content %}